<template>
  <view class="container">
    <!-- 状态栏和时间 -->
    <view class="status-bar">
      <text class="time">{{ currentTime }}</text>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="title">网易云音乐</text>
      <view class="user-info" @click="handleLogout">
        <text class="username">云村村民</text>
        <text class="logout-text">退出登录</text>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <input 
        class="search-input" 
        placeholder="搜索歌曲" 
        placeholder-class="placeholder-style"
        @click="toSearch"
      />
    </view>

    <!-- 活动卡片 -->
    <view class="activity-card">
      <text class="activity-title">你和谁的音乐\n口味最相似？</text>
      <view class="activity-footer">
        <text class="test-btn" @click="goToTestPage">测一测！</text>
        <text class="share-text">分享给好友</text>
      </view>
    </view>

    <!-- 榜单列表 -->
    <view class="chart-list">
      <block v-if="topList.length > 0">
        <view 
          v-for="(chart, index) in topList" 
          :key="chart.id" 
          class="chart-item" 
          @click="goToChartDetail(chart.id)"
        >
          <view class="chart-row">
            <!-- 榜单封面图 -->
            <view class="chart-cover">
              <image 
                :src="chart.coverImgUrl || '/static/placeholder.png'" 
                mode="aspectFill"
                class="cover-image"
              />
              <text class="update-info">{{ chart.updateFrequency }}</text>
            </view>
            <!-- 歌曲信息区域 -->
            <view class="song-info-list">
              <view class="song-preview">
                <view 
                  v-for="(song, i) in chart.tracks.slice(0, 3)" 
                  :key="i" 
                  class="preview-item"
                >
                  <text class="rank">{{ i + 1 }}.</text>
                  <text class="song-name">{{ song.first }}</text>
                  <text class="singer">- {{ song.second }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
      <view v-else class="empty-tip">
        <text>暂无榜单数据</text>
      </view>
    </view>

    <!-- 隐私保护指引 -->
    <view class="privacy-tip">
      <text class="privacy-text">点击了解《隐私保护指引》</text>
    </view>
  </view>
</template>

<script>
import { topList } from '../../common/api.js';

export default {
  data() {
    return {
      currentTime: '',
      topList: []
    };
  },
  onLoad() {
    this.fetchTopList();
    this.updateTime();
    // 每秒更新时间
    setInterval(this.updateTime, 1000);
  },
  methods: {
    // 更新时间显示
    updateTime() {
      const now = new Date();
      this.currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
    },

    // 获取榜单数据
    async fetchTopList() {
      try {
        const res = await topList();
        console.log('榜单数据:', res);
        
        // 假设接口返回数组中第二个元素为有效响应
        const validRes = res[1]?.data;
        if (!validRes || validRes.code !== 200) {
          throw new Error(validRes?.msg || '获取数据失败');
        }

        this.topList = validRes.list
          .filter(chart => chart.tracks?.length > 0)
          .map(chart => ({
            id: chart.id,
            name: chart.name,
            coverImgUrl: chart.coverImgUrl,
            updateFrequency: chart.updateFrequency,
            tracks: chart.tracks.map(track => ({
              first: track.first || '未知歌曲',
              second: track.second || '未知歌手'
            }))
          }));
      } catch (error) {
        console.error('获取榜单失败:', error);
        uni.showToast({
          title: '获取榜单失败',
          icon: 'none'
        });
      }
    },

    // 跳转搜索页
    toSearch(){
      uni.navigateTo({
        url: '/pages/search/search',
		fail: (err) => {
		                console.error('跳转搜索页面失败:', err);
		            }
      });
    },

    // 跳转测试页
    goToTestPage() {
      uni.navigateTo({
        url: '/pages/test/test'
      });
    },

    // 跳转榜单详情页
    goToChartDetail(chartId) {
      uni.navigateTo({
        url:  `/pages/list/list?id=${chartId}`
      });
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userInfo');
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
/* 基础样式 */
page {
  background-color: #E6E0F8;
}

.container {
  padding-bottom: 40rpx;
}

/* 状态栏 */
.status-bar {
  padding: 20rpx 20rpx 10rpx;
  .time {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx 20rpx;
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #d43c33;
  }
  .user-info {
    display: flex;
    align-items: center;
    .username {
      color: #666;
      font-size: 24rpx;
      margin-right: 10rpx;
    }
    .logout-text {
      color: #999;
      font-size: 24rpx;
      text-decoration: underline;
    }
  }
}

/* 搜索框 */
.search-box {
  background: #fff;
  border-radius: 40rpx;
  margin: 0 20rpx 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  .search-input {
    font-size: 28rpx;
    color: #333;
  }
  .placeholder-style {
    color: #999;
  }
}

/* 活动卡片 */
.activity-card {
  background: linear-gradient(to right, #ff6b6b, #d43c33);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx;
  color: white;
  .activity-title {
    font-size: 36rpx;
    line-height: 1.5;
    font-weight: bold;
  }
  .activity-footer {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    .test-btn {
      background: white;
      color: #d43c33;
      padding: 10rpx 30rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
      font-weight: bold;
    }
    .share-text {
      font-size: 24rpx;
      text-decoration: underline;
    }
  }
}

/* 榜单列表 */
.chart-list {
  margin: 20rpx;
  .empty-tip {
    padding: 40rpx;
    text-align: center;
    color: #999;
    font-size: 28rpx;
  }
  .chart-item {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    .chart-row {
      display: flex;
    }
    .chart-cover {
      width: 180rpx;
      height: 180rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      .cover-image {
        width: 100%;
        height: 100%;
      }
      .update-info {
        position: absolute;
        left: 8rpx;
        bottom: 8rpx;
        color: white;
        font-size: 20rpx;
        background: rgba(0,0,0,0.5);
        padding: 2rpx 8rpx;
        border-radius: 4rpx;
      }
    }
    .song-info-list {
      flex: 1;
      margin-left: 20rpx;
      overflow: hidden;
      .song-preview {
        .preview-item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          line-height: 1.4;
          &:last-child {
            margin-bottom: 0;
          }
          .rank {
            color: #d43c33;
            font-size: 24rpx;
            min-width: 40rpx;
            text-align: right;
            margin-right: 10rpx;
          }
          .song-name {
            color: #333;
            font-size: 26rpx;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .singer {
            color: #999;
            font-size: 24rpx;
            margin-left: 8rpx;
            flex-shrink: 0;
            max-width: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

/* 隐私保护 */
.privacy-tip {
  text-align: center;
  margin-top: 20rpx;
  .privacy-text {
    color: #999;
    font-size: 24rpx;
    text-decoration: underline;
  }
}
</style>